<!--
 * @Author: your name
 * @Date: 2021-07-12 15:48:16
 * @LastEditTime: 2021-11-09 11:05:41
 * @LastEditors: Please set LastEditors
 * @Description: Common feed form
 * @FilePath: \jinfeng_up\src\components\Feedback\Feedback.vue
-->
<template>
  <div class="insertFormWrap">
    <el-form :model="draftForm" ref="draftForm">
      <el-row type="flex" justify="spce-betweeen" :gutter="20">
        <el-col :span="8">
          <el-form-item label="产品名称" class="ProductionName">
            <el-select v-model="draftForm.productId" placeholder="请选择产品名称" @change="productionChange">
              <el-option v-for="(item, index) in ProductList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="营销项目名称" class="Marketing">
            <el-select
              v-model="draftForm.marketProjectFirst"
              placeholder="请选择营销项目名称"
              @change="marketProjectChange"
            >
              <el-option
                v-for="(item, index) in marketProjectFirstList"
                :key="index"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="版本号" class="VersionNum">
            <el-input v-model="draftForm.versionNumber"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row type="flex" justify="space-between" :gutter="20">
        <el-col :span="8">
          <el-form-item label="营销项目状态" class="Marketing">
            <el-select v-model="draftForm.marketProjectSecond" placeholder="请选择营销项目状态">
              <el-option
                v-for="(item, index) in marketProjectSecondList"
                :key="index"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="反馈来源" class="DesignatedPerson">
            <el-select v-model="draftForm.feedBackSource" placeholder="请选择反馈来源">
              <el-option v-for="(item, index) in feedBackSourceList" :key="index" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="指派人" class="DesignatedPerson">
            <el-select v-model="draftForm.userId" placeholder="请选择指派人">
              <el-option v-for="(item, index) in UserList" :key="index" :label="item.name" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 往下的表单内容都是可动态新增的 -->

      <el-row type="flex" :gutter="20">
        <el-col :span="8">
          <el-form-item class="Marketing" label="标题">
            <el-input v-model="draftForm.title"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="问题类型" class="DesignatedPerson">
            <el-select v-model="draftForm.problemType" placeholder="请选择问题类型">
              <el-option v-for="(item, index) in problemTypeList" :key="index" :label="item.title" :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <div class="questionDesc"><span style="color:red;">*</span>问题描述</div>
          <!-- <el-button v-model="draftForm.problemDescribe"></el-button> -->
          <quill-editor v-model="draftForm.problemDescribe" ref="notesQuillEditor"> </quill-editor>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <!-- <el-button v-model="draftForm.problemDescribe"></el-button> -->
          <div class="questionDesc"><span style="color:red;">*</span>初步排查结果</div>

          <quill-editor v-model="draftForm.excludeResult" ref="notesQuillEditor"> </quill-editor>
        </el-col>
      </el-row>

      <el-row type="flex" justify="spce-betweeen" :gutter="20">
        <el-col :span="8">
          <div class="questionDesc"><span style="color:red;">*</span>是否服务请求</div>
          <el-radio-group v-model="draftForm.isServerRequest" @change="isServerRequestChange">
            <el-radio :label="true">是</el-radio>
            <el-radio :label="false">否</el-radio>
          </el-radio-group>
        </el-col>

        <el-col :span="8" v-show="isServerOpen" v-if="draftForm.isServerRequest">
          <el-form-item label="服务请求编号" class="Marketing">
            <el-input v-model="draftForm.serverRequestNumber"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8" v-show="isServerOpen" v-if="draftForm.isServerRequest">
          <el-form-item label="服务请求创建时间" class="serviceRequestNum ProductionName serviseReqCreateTime">
            <el-date-picker v-model="draftForm.serverRequestTime" type="date" placeholder="请选择创建时间">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="25" type="flex" justify="spce-betweeen">
        <el-col :span="8">
          <el-form-item label="截止日期" class="DesignatedPerson serviceRequestNum">
            <el-date-picker v-model="draftForm.expirationDate" type="datetime" placeholder="请选择截止日期">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="影响类别 " class="VersionNum">
            <el-select v-model="draftForm.influenceCategory" placeholder="请选择影响类别">
              <el-option
                v-for="(item, index) in influenceCategory"
                :key="index"
                :label="item.title"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="影响描述" class="FeedBackDeatailDesc">
            <el-input v-model="draftForm.influenceDescribe" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col>
          <el-form-item label="添加附件" class="uploadFiles">
            <br />
            <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- <el-form-item>
        <el-button
          @click="submitForm('draftForm')"
          icon="el-icon-s-claim"
        ></el-button>
        <el-button
          @click="resetForm('draftForm')"
          icon="el-icon-refresh"
        ></el-button>
      </el-form-item> -->
  </div>
</template>

<script>
import { FeedBack } from '../../../../api/feedBack/server'
export default {
    name: '',
    components: {},
    props: {
        draftForm: {
            type: Object
        }
    },
    data() {
        return {
            activeNames: ['1'],

            // 创建反馈表单
            //   draftForm: {

            //         title: "",
            //         problemDescribe: "",
            //         excludeResult: "",
            //         isServerRequest: "",
            //         serverRequestNumber: "",
            //         serverRequestTime: "",
            //         expirationDate: "",
            //         influenceDescribe: "",
            //         problemTypeId: "",
            //         isService:"",
            //         influenceCategory:"",

            //     productId: "",
            //     userId: "",
            //     draftTag:null,
            //     versionNumber: "",
            //     marketProjectFirst: "",
            //     marketProjectSecond: "",
            //     feedBackSource: "",

            //   },

            // 动态控制服务是否开启
            isServerOpen: true,

            // 产品列表
            ProductList: [],

            // 指派人列表
            UserList: [],

            // 营销项目名称列表
            marketProjectFirstList: [],

            // 营销项目状态列表
            marketProjectSecondList: [],

            // 反馈来源列表
            feedBackSourceList: [],

            // 问题类型列表
            problemTypeList: [],

            // 影响类别列表
            influenceCategory: [
                {
                    title: '影响现场生产',
                    value: 0
                },
                {
                    title: '影响验收',
                    value: 1
                },
                {
                    title: '影响回款',
                    value: 2
                },
                {
                    title: '影响不大',
                    value: 3
                }
            ]
        }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {
    /* 检测数据是否传递 */
        console.log('go--------->', this.draftForm)

        /* 数据字典 */
        this.getProductList()
        this.getMarketProjectFirstList('0') // 营销项目名称
        this.getMarketProjectFirstList('1') // 反馈来源列表
        this.getMarketProjectFirstList('2') // 问题类型列表
    // this.productionChange(this.draftForm.productId)
    },
    methods: {
    /* 产品相关开始 */

        // 获取所有产品信息
        async getProductList() {
            try {
                const result = await FeedBack.ProInsertAsync()
                if (result.success) {
                    this.ProductList = result.data
                    console.log(result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 产品名称选择器 (选择改变指派人)

        async productionChange(_val) {
            console.log('====================================')
            console.log(_val)
            console.log('====================================')
            // 根据产品ID获得指派人列表
            try {
                const result = await FeedBack.GetListItemAsync({ id: _val })
                if (result.success) {
                    this.UserList = result.data
                    console.log('MM67', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        // 营销项目名称选择器(选择改变营销项目状态)
        async marketProjectChange(_val) {
            // 根据营销项目名称ID获得营销项目状态列表
            try {
                const result = await FeedBack.FormOptionGetListItemAsync({
                    id: _val,
                    type: '0'
                })
                if (result.success) {
                    this.marketProjectSecondList = result.data
                    console.log('MM', result.data)
                }
            } catch (err) {
                console.log(err)
            }
        },

        //  判断是否服务请求
        isServerRequestChange(_val) {
            console.log(_val)
            this.isServerOpen = _val
        },

        /* 产品相关结束 */

        // 获取相关下拉列表(type)
        async getMarketProjectFirstList(type) {
            if (type == '0') {
                try {
                    const result = await FeedBack.FormOptionGetListItemAsync({
                        type: type
                    })
                    if (result.success) {
                        this.marketProjectFirstList = result.data
                        console.log('M', result.data)
                    }
                } catch (err) {
                    console.log(err)
                }
            } else if (type == '1') {
                try {
                    const result = await FeedBack.FormOptionGetListItemAsync({
                        type: type
                    })
                    if (result.success) {
                        this.feedBackSourceList = result.data
                        console.log('S', result.data)
                    }
                } catch (err) {
                    console.log(err)
                }
            } else {
                try {
                    const result = await FeedBack.FormOptionGetListItemAsync({
                        type: type
                    })
                    if (result.success) {
                        this.problemTypeList = result.data
                        console.log('P', result.data)
                    }
                } catch (err) {
                    console.log(err)
                }
            }
        }
    }
}
</script>

<style scoped lang="less" src="./commonForm.less"></style>
